<template>
    <a-drawer :title="title" :width="450"
              @close="handleCancel(false)"
              :visible="visible"
              :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">


            <a-form-model-item label="所属模块">
                <a-input v-model="form.paramCode" :disabled="true"/>

            </a-form-model-item>


            <a-form-model-item label="配置项标题" prop="title" ref="title">
                <a-input placeholder="请设置配置参数标题" v-model="form.title"/>
            </a-form-model-item>


            <!-- 登录账号 -->
            <a-form-model-item label="配置项代码" prop="itemCode" ref="itemCode">


                <a-input placeholder="请设置参数代码"
                         :addonBefore="form.paramCode+'.'"
                         v-model="form.itemCode"
                         :disabled="isUpdate"
                />
            </a-form-model-item>


            <a-form-model-item label="配置参数值" prop="itemValue" ref="itemValue">

                <a-input-group compact>
                    <a-select v-model="form.dataType"

                              style="width: 30%">
                        <a-select-option v-for=" (item,index) in DataTypeOPT" :key="index" :value="item.value">
                            {{item.label}}
                        </a-select-option>
                    </a-select>
                    <a-input placeholder="请设置参数值" v-model="form.itemValue" style="width: 70%"/>
                </a-input-group>


            </a-form-model-item>


            <a-form-model-item label="参数描述" prop="description" ref="description">
                <a-textarea placeholder="参数描述" v-model="form.description"/>
            </a-form-model-item>


        </a-form-model>


        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存配置项</a-button>
        </footer>
    </a-drawer>
</template>
<script>

    import {paramItemAdd, paramItemUpdate} from "../public/http";
    import {dictLoad} from '../../../util/internal.api';

    export default {
        props: ['record', 'paramCode'],
        data() {
            return {
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '添加配置参数',
                visible: true, //modal 显示状态

                form: {
                    title: null,
                    itemCode: null,
                    itemValue: null,
                    dataType: "",
                    paramCode: null,
                    description: null,


                },
                rules: {
                    title: [
                        {
                            required: true,
                            message: '请设置参数标题',
                            trigger: 'blur'
                        },
                        {
                            max: 30,
                            message: '参数标题请设置在30个字符以内',
                            trigger: 'blur'
                        }

                    ],

                    itemCode: [
                        {
                            required: true,
                            message: '请设置参数代码',
                            trigger: 'blur'
                        },
                        {
                            max: 50,
                            message: '配置代码请设置在50个字符以内',
                            trigger: 'blur'
                        }
                    ],


                    itemValue: [
                        {
                            required: true,
                            message: '请设置参数值',
                            trigger: 'blur'
                        }

                    ],


                    dataType: {
                        required: true,
                        message: '请选择参数值的数据类型',
                        trigger: 'blur'
                    }


                },


                DataTypeOPT: [],

            };
        },
        methods: {

            //表单提交事件
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        if (this.isUpdate) {
                            paramItemUpdate(this.form.id, this.form).then(res => {
                                this.$exMod.ajaxMessage(res)
                                res.code === 0 ? this.handleCancel(true) : null;


                            })
                        } else {
                            paramItemAdd(this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                res.code === 0 ? this.handleCancel(true) : null;
                            })
                        }

                        this.loading = false;
                    }
                });
            },
            //关闭弹窗 刷新
            handleCancel(render = false) {
                this.visible = false;
                this.$emit('closeModal', {render: render});
            },
            //表单初始化
            fromVal() {
                let obj = {...this.record};
                this.form = obj;
                this.form.paramCode = this.paramCode;
                if (obj.id) {
                    this.isUpdate = true;
                    this.title = '修改参数配置项';
                } else {
                    let mx = this.DataTypeOPT[0];
                    this.form.dataType = mx.value
                }


            },
            //数据初始化
            async init() {
                await dictLoad("SystemDataType").then(res => this.DataTypeOPT = res);
                this.fromVal();
            }
        },


        created() {
            this.init();
        }
    };
</script>
